<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>便签</title>
  <style>
    ul {
      padding-top: 30px;
      margin: 50px 50px;
      /* width: 600px; */
      /* height: 600px; */
      background-color: aliceblue;
    }
    /* 解决高度坍塌问题 */
    ul::after{
      content: "";
      clear: both;
      display: block;
    }
    li{
      position: relative;
      margin-left: 30px;
      margin-right: 30px;
      margin-top: 20px;
      list-style: none;
      width: 180px;
      height: 180px;
      background-color: #bfd;
      box-shadow: 0px 0px 10px 3px rgb(100, 150, 100) ;
      float: left;
      transform: rotateZ(-6deg);
      transition-property: all;
      transition-duration: 300ms;
    }
    
    li:last-child{
      margin-bottom: 50px;
    }

    li:nth-child(even) {
      transform: rotateZ(4deg);
    }

    li:nth-child(3n) {
      background-color: cornsilk;
      transform: rotateZ(-4deg);
    }

    li:nth-child(5n) {
      transform: rotateZ(10deg);
    }

    li:nth-child(3n+1) {
      background-color: cyan;
    }

    li:hover{
      transform: scale(1.3);
      z-index: 100;
    }

    h2{
      padding-left: 10px;
      /* margin-top:10px; */
      padding-top: 10px;
    }

    p{
      /* 设置p里面的文字居中显示 */
      text-align: center;
      font-size: 20px;
      font-family: 'Times New Roman', Times, serif;
      line-height: 40px;
    }
    
  </style>
</head>

<body>
  <ul>
    <li>
      <h2>#1 独坐敬亭山</h2>
      <p>众鸟高飞尽，<br>孤云独去闲。</p>
    </li>
    <li>
      <h2>#2 鸟鸣涧</h2>
      <p>人闲桂花落，<br>夜静春山空。</p>
    </li>
    <li>
      <h2>#3 西洲曲</h2>
      <p>南风知我意，<br>吹梦到西州。</p>
    </li>
    <li>
      <h2>#4 问刘十九</h2>
      <p>晚来天欲雪，<br>能饮一杯无。</p>
    </li>
    <li>
      <h2>#5 梅花</h2>
      <p>遥知不是雪，<br>为有暗香来。</p>
    </li>
    <li>
      <h2>#6 宿建德江</h2>
      <p>移舟泊烟渚，<br>日暮客愁新。</p>
    </li>
    <li>
      <h2>#7 行宫</h2>
      <p>寥落古行宫，<br>宫花寂寞红。</p>
    </li>
    <li>
      <h2>#8 蝉</h2>
      <p>居高声自远，<br>非是藉秋风。</p>
    </li>
    <li>
      <h2>#9 杂诗</h2>
      <p>及时当勉励，<br>岁月不待人。</p>
    </li>
  </ul>
</body>

</html>